<!-- 用户头像信息组件 -->
<template>
    <div class="user-header">
        <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
                <el-avatar shape="circle" :size="30" :src="user.avatarUrl" />
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :icon="UserFilled" :command="0">{{$t("message.personaldetails")}}</el-dropdown-item>
                    <el-dropdown-item :icon="Unlock" :command="1" divided>{{$t("message.changepassword")}}</el-dropdown-item>
                    <el-dropdown-item :icon="Right" :command="2" divided>{{$t("message.loginout")}}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script  lang="ts" setup>
import { UserFilled,Unlock,Right} from '@element-plus/icons-vue'
import { useRouter } from "vue-router";

import { useUserStore } from "@/stores/admin";
const router = useRouter() 
const store = useUserStore()
const user = store.user
const handleCommand = (e:number)=>{
    switch (e) {
        case 0:
            router.push({path:"/index/userinfo"});
            break;
        case 1:
            router.push({path:"/index/changepassword"});
            break;    
        case 2:
            store.loginOut()
            break;    
        default:
            break;
    }
}
</script>
<style scoped lang="less">
    .user-header{
        cursor: pointer;
    }
</style>